
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>注册</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
	<link rel="stylesheet" href="css/me.css" >
</head>
<body>
	<br />
	<br />
	<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
		<div class="ui container">
			<div class="ui middle aligned center aligned grid">
				<div class="column">
					<h2 class="ui teal image header">
						<div class="content">
							用户注册
						</div>
					</h2>
					<form id="app" class="ui large form">
						<div class="ui stacked segment">
							<div class="field">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="username" id="username" placeholder="账号">

								</div>
							</div>
							<div class="field">
								<div class="ui left icon input">
									<i class="lock icon"></i>
									<input type="password" name="password" id="password" placeholder="密码">
									<!--  <label v-if=" password.length==0 " v-text="pmessage"></label>-->
								</div>
							</div>
							<div class="field">
								<div class="ui left icon input">
									<i class="lock icon"></i>
									<input type="password" name="password2" id="password2" placeholder="再次密码">
								</div>
							</div>
							<div class="field" style="display:none;" id="msgDiv">
								<div class="ui left icon input">
									<span style="color: red; align-content: center;" id="msg">密码不一致</span>
								</div>
							</div>
						</div>
						<div onclick="reg()" class="ui fluid large teal submit button">注册</div>
						<div class="ui message"  style="display:none;" id="loginDiv">
							已有账号？ 点击    <a href="login.html">登录</a>
						</div>
					</form>
				</div>

			</div>
		</div>

	</div>
	</div>

	<!--	/*/<th:block th:replace="fragment::script">/*/-->
    <script src="js/jquery.min.js"></script>
    <script src="js/semantic.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/register.js"></script>
    <!--    /*/</th:block>/*/-->

	<script>
		function reg(){
			var username = $("#username").val();
			var password = $("#password").val();
			var password2 = $("#password2").val();

			if (password != password2) {
				$("#msg").html("两次密码输入不一致");
				$("#msgDiv").show();
				return false;

			}else {
				values ={};
				values["username"] = username;
				values["password"] = password;
				values["password2"] = password2;
				axios.post('http://localhost:8888/user/reg',values).then(function(res){
					var data = res.data;
					if (data.code == 200){
						window.location.href="login.html"
					}else{
						$("#msg").html(data.msg);
						$("#msgDiv").show();
					}
				})
			}

		}
	</script>

</body>
</html>
